/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React, {useEffect, useState} from 'react';
import type {PropsWithChildren} from 'react';
import {FlatList, LogBox, TouchableOpacity} from 'react-native';
import {
  Alert, Button,
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

import {
  Colors,
  DebugInstructions,
  Header,
  LearnMoreLinks,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import useShortcutStore from "../store/shortcut";
// import {Swipeable} from "react-native-gesture-handler";
import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from "./Home";

type SectionProps = PropsWithChildren<{
  title: string;
}>;

// function Section({children, title}: SectionProps): React.JSX.Element {
//   const isDarkMode = useColorScheme() === 'dark';
//   return (
//     <View style={styles.sectionContainer}>
//       <Text>
//         Hello Jimmy Mo using React Native
//       </Text>
//       <Text
//         style={[
//           styles.sectionTitle,
//           {
//             color: isDarkMode ? Colors.white : Colors.black,
//           },
//         ]}>
//         {title}
//       </Text>
//       <Text
//         style={[
//           styles.sectionDescription,
//           {
//             color: isDarkMode ? Colors.light : Colors.dark,
//           },
//         ]}>
//         {children}
//       </Text>
//     </View>
//   );
// }

function App(): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  // const [buttonClicked, setButtonClicked] = useState<boolean>(false);
  // const instanceUrl = "http://10.0.2.2:3000";
  // const accessToken = "eyJhbGciOiJIUzI1NiIsImtpZCI6InYxIiwidHlwIjoiSldUIn0.eyJuYW1lIjoiam9jdW5kX21vQGFsaXl1bi5jb20iLCJpc3MiOiJzbGFzaCIsInN1YiI6IjEwMiIsImF1ZCI6WyJ1c2VyLmFjY2Vzcy10b2tlbiJdLCJpYXQiOjE3MTM5MjE4OTZ9.KolIVA97gfDTXX1rx-rZe_nzFIo2MVxI5ggE3amH_-g";
  // const pageNumber = 1;
  // const pageSize = 20;
  // const selectedCollections = [];
  const Tab = createBottomTabNavigator();
  // useEffect(() => {
  //   // if (!isInitialized) {
  //   //   return;
  //   // }
  //   Alert.alert(instanceUrl);
  //   Promise.all([
  //     shortcutStore.fetchShortcutList(instanceUrl, accessToken, pageNumber, pageSize, selectedCollections),
  //     // shortcutStore.countShortcutList(selectedCollections, searchText, searchType),
  //   ])
  //     .then(([shortcuts]) => {
  //       console.log(shortcuts);
  //       console.log(shortcuts.length);
  //       // Alert.alert(shortcuts.length);
  //       // Alert.alert(shortcuts.length);
  //       // setPageCount(Math.ceil(count / pageSize));
  //       // setShortcutCount(count);
  //       // setCheckedStatusList([]);
  //     }).catch((error) => {
  //      // Alert.alert(error);
  //     console.log(error.toString());
  //     // Alert.alert(error.toString());
  //     })
  //     .finally(() => {
  //       // loadingState.setFinish();
  //     });
  //   // await shortcutStore.fetchShortcutList(instanceUrl, accessToken, pageNumber, pageSize, selectedCollections);
  // }, [buttonClicked]);

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };
  // const onPressButton = () => {
  //   Alert.alert('Button pressed!');
  //   setButtonClicked(prev => !prev);
  //   console.log(shortcuts.length);
  //   // Alert.alert(shortcuts.length);
  // };
  // const handlePress = (item) => {
  //   console.log('Item pressed:', item);
  //   // 在这里可以处理列表项点击事件的逻辑
  // };
  // const handleDelete = (item) => {
  //   console.log('Delete item:', item);
  //   // 在这里可以处理删除操作的逻辑
  // };
  // const renderRightActions = (progress, dragX, item) => {
  //   const trans = dragX.interpolate({
  //     inputRange: [0, 50, 100],
  //     outputRange: [0, 0.2, 1],
  //   });
  //   return (
  //     <TouchableOpacity onPress={() => handleDelete(item)}>
  //       <View style={{ backgroundColor: 'red', justifyContent: 'center', alignItems: 'center', width: 100 }}>
  //         <Text style={{ color: 'white', paddingHorizontal: 10, paddingVertical: 15 }}>Delete</Text>
  //       </View>
  //     </TouchableOpacity>
  //   );
  // };
  // const renderShortcuts = ({ item }) => (
  //   // <Swipeable renderRightActions={(progress, dragX) => renderRightActions(progress, dragX, item)}>
  //   <TouchableOpacity onPress={() => handlePress(item)} style={{ padding: 10, borderBottomWidth: 1, borderBottomColor: '#ccc' }}>
  //     <Text>{item.title}</Text>
  //   </TouchableOpacity>
  //   // </Swipeable>
  // );
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={Home} />

      </Tab.Navigator>
    </NavigationContainer>
    // <SafeAreaView style={{ backgroundColor: isDarkMode ? Colors.darker : Colors.lighter}}>
    //
    //
    //   <StatusBar
    //   barStyle={isDarkMode ? 'light-content' : 'dark-content'}
    //   backgroundColor={backgroundStyle.backgroundColor}
    //   />
    //
    //   <ScrollView
    //     contentInsetAdjustmentBehavior="automatic"
    //     style={backgroundStyle}>
    //     <Header />
    //     <View
    //       style={{
    //         backgroundColor: isDarkMode ? Colors.black : Colors.white,
    //       }}>
    //
    //       <LearnMoreLinks />
    //     </View>
    //   </ScrollView>
    // </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
});

export default App;
